<template>
  <div class="document-list-container">
    <div class="list-content" ref="lisrContent">
      <div
        class="list-item"
        v-for="item in list"
        :key="item.id"
        @click="toDetail(item)"
      >
        <div class="item-top">
          <p class="item-title" ref="title" v-html="item.handleTitle">
            {{ item.title }}
          </p>
          <!-- 我发布的显示分享 -->
          <span
            class="share"
            v-if="!item.isDraft && item.allowShare && shareEnable"
            @click.stop="
              shareWiki(item);
              trackEventHandler('share');
            "
          >
            <!-- 在线客服的知识库只有外部的才显示分享 -->
            <i class="iconfont icon-share icon-article-share">{{$t('common.base.share')}}</i>
          </span>
        </div>
        <div class="item-content" ref="content">
          {{ removeLabel(item.content) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** util */
import * as ImApi from '@src/api/ImApi.js';
import { removeLabel } from '@src/util/format/string.ts';
import { getWikiConfig } from '@src/api/Repository';
/** vue */
import EventBus from '@src/util/eventBus';
export default {
  name: 'list',
  props: {
    keyword: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: () => [],
    },
    hxIdObj: {
      type: Object,
    },
    source: {
      type: String,
    },
  },
  data() {
    return {
      shareEnable: false, // 是否有分享权限（知识库系统设置分享按钮是否开启）
    };
  },
  async mounted() {
    this.shareEnable = await this.getWikiConfig();
  },
  methods: {
    async getWikiConfig() {
      try {
        let res = await getWikiConfig()
        return res?.result?.permitShare || false;
      } catch (e) {
        console.error(e)
        return false;
      }
    },
    removeLabel,
    resetScrollTop() {
      this.$refs.lisrContent.scrollTop = 0;
    },
    // 跳转到详情页面
    toDetail(item) {
      this.$emit('update:id', item.id);
      this.$emit('toDetail', item);
    },

    // TalkingData事件埋点
    trackEventHandler(type) {
      if (type === 'share') {
        window.TDAPP.onEvent('pc：知识库列表-分享事件');
        this.$track.clickStat(this.$track.formatParams('CHAT_SHARING_WIKI'));
        return;
      }
      if (type === 'reset') {
        window.TDAPP.onEvent('pc：知识库列表-点击标签搜索');
        return;
      }
    },
    async shareWiki(item) {
      // 点击分享判断是否有分享权限
      let share = await this.getWikiConfig();
      if(!share) {
        this.$message.error(this.$t('wiki.list.noShareTips'))
        return
      }

      this.$confirm(this.$t('wiki.shareWikiTips'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning'
      }).then(async() => {
        try {
          // 邮件来源会话分享知识库
          if(this.source === 'emailService'){
            return EventBus.$emit('emailServiceShareWiki', item);
          }
          const params = {
            conversationId: this.hxIdObj.conversationId,
            wikiId: item.id,
          };
          const { code, data, message } = await ImApi.shareWiki(params);
          if (code == 0) {
            EventBus.$emit('addMessageByKF', data);
          } else {
            this.$message.error(message);
          }
        } catch (err) {
          console.log(err);
          this.$message.error(this.$t('common.base.tip.shareFail'));
        }
      })
      
    },
  },
};
</script>

<style lang="scss">
.document-list-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .list-content {
    .list-noData {
      line-height: 40px;
      text-align: center;
      color: #909399;
    }
  }
  .list-item {
    padding: 10px 11px;
    border-radius: 4px;
    margin-bottom: 12px;
    background-color: #ffffff;
    cursor: pointer;
    &:last-child {
      margin-bottom: 0;
    }
    .item-top {
      font-size: 0;
      display: flex;
      height: 24px;
      line-height: 24px;
      .item-title {
        flex: 1;
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        @include text-ellipsis();
      }
      .share {
        width: 45px;
        height: 20px;
        line-height: 20px;
        .icon-article-share {
          font-size: 14px;
          color: $color-primary-light-6;
        }
      }
    }
    .item-content {
      @include text-ellipsis-2();
      font-size: 12px;
      color: #8c8c8c;
      margin-top: 4px;
    }
  }
}
</style>